<template>
	<view class="page">
		<view class="search">
			<u-search 
			placeholder="商品搜索" 
			v-model="keyword" 
			searchIconSize="40rpx" 
			height="70rpx"
			@focus="isFocus = true"
			@blur="isFocus = false"
			@clear="keyword = ''"
			@change="getListData"
			@search="onSearch"
			@custom="onSearch"></u-search>
			<!-- 帅选栏 -->
			<view 
			v-show="showList"
			class="nav l-f l-row-sb">
				<view 
				@click="changeNav(0)"
				class="nav_item l-f1 l-f l-row-c"
				hover-class="hover">
					<text 
					class="nav_item_label"
					:class="currentNavIndex === 0 ? 'nav_item_active' : ''">综合</text>
				</view>
				<view 
				@click="changeNav(1)"
				class="nav_item l-f1 l-f l-row-c"
				hover-class="hover">
					<text 
					class="nav_item_label"
					:class="currentNavIndex === 1 ? 'nav_item_active' : ''">价格</text>
					<view class="l-f l-column l-mg-left6">
						<uni-icons type="top" size="22rpx" :color="currentNavIndex === 1 && priceSrot === 'asc' ? '#E81526' : '#666666'"></uni-icons>
						<uni-icons type="bottom" size="22rpx" :color="currentNavIndex === 1 && priceSrot === 'desc' ? '#E81526' : '#666666'"></uni-icons>
					</view>
				</view>
				<view 
				@click="changeNav(2)"
				class="nav_item l-f1 l-f l-row-c"
				hover-class="hover">
					<text 
					class="nav_item_label"
					:class="currentNavIndex === 2 ? 'nav_item_active' : ''">销量</text>
					<view class="l-f l-column l-mg-left6">
						<uni-icons type="top" size="22rpx" :color="currentNavIndex === 2 && salesSrot === 'asc' ? '#E81526' : '#666666'"></uni-icons>
						<uni-icons type="bottom" size="22rpx" :color="currentNavIndex === 2 && salesSrot === 'desc' ? '#E81526' : '#666666'"></uni-icons>
					</view> 
				</view>
			</view>
		</view>
		<view v-if="keyword.length === 0" class="animate__animated animate__fadeIn animate__faster">
			<view class="card" v-if="historyListData.length > 0">
				<!-- 历史记录 -->
				<view class="title l-f l-row-sb">
					<view class="title_label">历史记录</view>
					<view 
					@click="clearHistory"
					class="title_del"
					hover-class="hover">
						<uni-icons type="trash" size="50rpx" color="#E81526"></uni-icons>
					</view>
				</view>
				<view class="search-tag l-f l-wrap">
					<view
					@click="onClickSearch(item)"
					class="search-tag_item"
					hover-class="hover"
					v-for="(item,index) in historyListData"
					:key="index">{{item}}</view>
				</view>
			</view>
			<view class="card">
				<!-- 热门搜索 -->
				<view class="title">
					<view class="title_label">热门搜索</view>
				</view>
				<view class="search-tag l-f l-wrap">
					<view 
					@click="onClickSearch(item.keyword)"
					class="search-tag_item"
					hover-class="hover"
					v-for="(item,index) in hotListData"
					:key="index">{{item.keyword}}</view>
				</view>
			</view>
		</view>
		<template v-else>
			<!-- 搜索列表 -->
			<view class="search-list animate__animated animate__fadeIn animate__faster" v-if="!showList">
				<no-data v-if="loadEnd && searchListData.length === 0" :center="true" />
				<scroll-view 
				v-else
				scroll-y="true" 
				class="search-list_scroll">
					<view 
					@click="onClickSearch(item.name)"
					class="search-list_item l-line1"
					hover-class="hover"
					v-for="(item,index) in searchListData"
					:key="index">{{item.name}}</view>
				</scroll-view>
			</view>
			<template v-else>
				<no-data v-if="loadEnd && listData.length === 0" :center="true" />
				<template v-else>
					<view class="list-box l-f l-wrap">
						<list-item
						v-for="(item,index) in listData"
						:key="item.id"
						:options="item"
						 />
					</view>
					<uni-load-more :status="loadStatus" iconType="snow"></uni-load-more>
				</template>
			</template>
		</template>
	</view>
</template>

<script>
	import {
		getHotSearchListApi,
		getSearchListApi
	} from '@/api/goods.js'
	import ListItem from '@/pages/aPackage/goodsSearch/components/listItem/listItem.vue'
	import {scrollTo} from '@/utils/utils.js'
	export default {
		components: {
			ListItem
		},
		data() {
			return {
				keyword: '',
				hotListData: [], // 热门搜索
				searchListData: [],
				listData: [],
				historyListData:[], // 历史记录
				page: 1,
				limit: 5,
				loadStatus: 'loading',
				loadEnd: false,
				showList: false, // 是否显示列表
				currentNavIndex: 0,
				priceSrot: 'asc',
				salesSrot: 'asc',
				isFocus: false
			};
		},
		onLoad() {
			this.getHotSearchList()
			this.getHistoryList()
		},
		onReachBottom() {
			if(this.loadEnd) return
			this.page++
			this.onSearch()
		},
		methods: {
			async getHotSearchList() {
				const res = await getHotSearchListApi()
				this.hotListData = res.data.hotKeywordList
			},
			onClickSearch(value) {
				this.keyword = value
				this.onSearch()
			},
			// 切换
			changeNav(index) {
				if(this.currentNavIndex === 1) {
					this.priceSrot = this.priceSrot === 'asc' ? 'desc' : 'asc'
				}
				if(this.currentNavIndex === 2) {
					this.salesSrot = this.salesSrot === 'asc' ? 'desc' : 'asc'
				}
				this.currentNavIndex = index
				this.page = 1
				this.onSearch(true)
			},
			async onSearch(isToTop = false) {
				if(this.keyword.length === 0 || this.keyword === ' ') {
					uni.showToast({
						title: '搜索商品不能为空',
						icon: 'none'
					})
					return
				}
				if(isToTop) {
					scrollTo(0,300)
				}
				this.setKeys('goods',this.keyword,10)
				this.getHistoryList()
				this.showList = true
				this.loadStatus = 'loading'
				let order = ''
				let num = ''
				switch(this.currentNavIndex) {
					case 0:
						order = ''
						num = ''
					break;
					case 1:
						order = this.priceSrot
						num = ''
					break;
					case 2:
						order = ''
						num = this.salesSrot
					break;
				}
				const res = await getSearchListApi({
					keyword: this.keyword,
					page: this.page,
					order: order,
					num: num,
					user_id: this.user_id
				})
				this.loadStatus = 'more'
				// 查询为空
				if(!res.data.res) {
					this.loadEnd = true
					this.loadStatus = 'noMore'
					this.listData = this.page === 1 ? [] : this.listData
					return
				}
				if(this.page >= res.data.total_page) {
					this.loadEnd = true
					this.loadStatus = 'noMore'
				}
				if(this.page === 1) {
					this.listData = res.data.res
					return
				}
				this.listData = this.listData.concat(res.data.res)
			},
			async getListData() {
				if(!this.isFocus) return
				const res = await getSearchListApi({
					keyword: this.keyword,
					page: this.page,
					user_id: this.user_id
				})
				this.loadEnd = true
				this.showList = false
				// 查询为空
				if(!res.data.res) {
					this.searchListData = []
					return
				}
				this.searchListData = res.data.res
			},
			// 删除历史记录
			clearHistory() {
				uni.showModal({
					title: '提示',
					content: "确定删除吗？",
					success: (e) => {
						if(e.confirm) {
							uni.removeStorage({
								key: 'history_goods',
								success: () => {
									this.historyListData = []
								}
							})
						}
					}
				})
			},
			// 获取历史搜索记录
			getHistoryList() {
				this.historyListData = uni.getStorageSync('history_goods') || []
			},
			/**
			 * 对搜索关键词存储
			 * @param {Boolean} type 分类
			 * @param {String} value 搜索关键词
			 * @param {Number} maxNum 存储最大数量
			 */
			setKeys(type,value,maxNum) {
				// 1. 如果存在，则不存储
				// 2. 如果超出 20 个，则删除最后一个来空出存储空间
				// 3. 存储对象包括 当前搜索类型以及当前存储的关键词
				// 判断缓存中是否存在改类型的搜索历史记录
				let data = uni.getStorageSync('history_' + type) || []
				if ( data && data.length > 0) { // 存在历史记录
					// 判断是否存在
					data.forEach((item,index) => {
						// 判断是否存在
						if (item == value) {
							data.splice(index,1)
						}
					})
					// 插入到最前面
					data.unshift(value)
					// 判断是否超过20个
					if (data.length >= maxNum) {
						// 移除 最后一个
						data.pop()
					}
				} else { // 不存在则直接插入
					data.push(value)
				}
				// 存储
				uni.setStorageSync('history_' + type, data)
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/pages/aPackage/goodsSearch/goodsSearch.scss";
</style>
